<template>
  <div>
    <!-- 搜索栏 -->
    <el-card id="search">
      <el-row>
        <el-col :span="4" align="left">
          <el-button
            type="primary"
            icon="el-icon-plus"
            circle
            @click="openEditUI(null)"
          />
        </el-col>
        <el-col :span="20" align="right">
          <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
            教程
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 结果列表 -->
    <el-card>
      <el-table :data="marketList" stripe style="width: 100%">
        <el-table-column label="#" width="80">
          <template slot-scope="scope">
            <!-- (pageNo-1) * pageSize + index + 1 -->
            {{
              (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" width="180"/>
        <el-table-column prop="field" label="字段名称" width="480"/>
        <el-table-column prop="content" label="字段值（请用分号隔开）" width="280"/>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="openEditUI(scope.row.id)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 用户信息编辑对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @close="clearForm"
    >
      <el-form ref="userFormRef" :model="userForm">
        <el-form-item
          label="字段名称"
          prop="username"
          :label-width="formLabelWidth"
        >
          <el-select v-model="userForm.field" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字段值" :label-width="formLabelWidth">
          <el-input
            v-model="userForm.content"
            placeholder="7-6;20-7;40-8;60-9;80-10;100-11;"
            clearable
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMarket">确 定</el-button>
      </div>
    </el-dialog>

    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
    >
      <br>
      <span class="discount-span"> 1.阶梯优惠卷(MARKET):7-6;20-8;40-10;60-12;80-14;</span>
      <br>
      <span class="discount-span"> 同一个商品下 不同的SKU规格 满7减6 满20-8 满40-10 以此类推</span>
      <br>
      <br>
      <span class="discount-span"> 2.最小SKU设置（MINI_SKU): 10-0.9;20-0.9;1000-0.9</span>
      <br>
      <span class="discount-span"> 原价在10元以下的是0.9折  10-20是0.9折 20到1000之间0.9折（注意这里的折扣是同行的原价）</span>
      <br>
      <span> 3.其他SKU设置 0.99</span>
      <br>
      <span> 原价的0.99折</span>

    </el-drawer>
  </div>
</template>

<script>
import tbMarket from '@/api/tbMarket'

export default {
  data() {
    return {
      drawer: false,
      formLabelWidth: '130px',
      userForm: {},
      dialogFormVisible: false,
      title: '',
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 10
      },
      marketList: [],
      options: [{
        value: 'MARKET',
        label: 'MARKET（优惠劵）'
      }, {
        value: 'MINI_SKU',
        label: 'MINI_SKU （最低SKU）'
      }, {
        value: 'NORMAL_SKU',
        label: 'NORMAL_SKU（除了最低SKU剩下的SKU）'
      }]
    }
  },
  created() {
    this.getMarketList()
  },
  methods: {
    saveMarket() {
      // 触发表单验证
      this.$refs.userFormRef.validate((valid) => {
        if (valid) {
          // 提交请求给后台
          tbMarket.saveMarket(this.userForm).then(response => {
            // 成功提示
            this.$message({
              message: response.message,
              type: 'success'
            })
            // 关闭对话框
            this.dialogFormVisible = false
            // 刷新表格
            this.getMarketList()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    clearForm() {
      this.userForm = {}
      this.$refs.userFormRef.clearValidate()
    },
    openEditUI(id) {
      if (id == null) {
        this.title = '新增规格'
      } else {
        this.title = '修改规格'
        // 根据id查询用户数据
        tbMarket.getMarketById(id).then(response => {
          this.userForm = response.data
        })
      }
      this.dialogFormVisible = true
    },
    getMarketList() {
      tbMarket.getTbMarketList(this.searchModel).then((response) => {
        this.marketList = response.data.rows
        this.total = response.data.total
      })
    }
  }
}
</script>

<style>
#search .el-input {
  width: 200px;
  margin-right: 10px;
}

.discount-span {
  margin: 10px;
}

.el-dialog .el-input {
  width: 85%;
}
</style>
